<template>
	<div class="authority">
		<a-table rowKey="id" :columns="columns" :pagination="pagination" :loading="loading" :dataSource="items" @change="tableChange">
			<template #title>
				<div class="flex justify-between">
					<div class="flex">
						<a-button type="primary" @click="add()" v-access="['Ques:save']">
							<template #logo>
								<PlusOutlined />
							</template>
							新增
						</a-button>
					</div>
					<a-form layout="inline" :model="searchData" @finish="fetch({...searchData, page: pagination.current})">
						<a-form-item>
							<div>{{bank_name}}</div>
						</a-form-item>
						<a-form-item>
							<a-input v-model:value="searchData.title" placeholder="试题标题">
							</a-input>
						</a-form-item>
						<a-form-item>
							<a-button type="primary" html-type="submit">
								搜索
							</a-button>
						</a-form-item>
					</a-form>
				</div>
			</template>
			<template #bodyCell="{ text, record, index, column }">
				<a-space wrap v-if="column.dataIndex === 'operation'">
					<a-button class="text-xs" type="primary" size="small" @click="$refs.form.edit(record)" v-access="['Ques:update']">编辑</a-button>
					<a-popconfirm title="确认删除？" @confirm="remove(record)">
						<a-button class="text-xs" danger size="small" v-access="['Ques:del']">删除</a-button>
					</a-popconfirm>
				</a-space>
				<template v-else-if="column.dataIndex === 'status'">
					<a-switch :checked="text" checked-children="是" :checked-value="2" un-checked-children="否" :un-checked-value="1" @change="(e: number)=>put({id: record.id, status: e})" />
				</template>
			</template>
		</a-table>
		<ques-edit ref="form" @change="updated" />
	</div>
</template>
<script lang="ts">
import {page, list} from "@/mixins"
import QuesEdit from "./QuesEdit.vue"

export default {
	mixins: [page, list],
	components: {QuesEdit},
	data() {
		return {
			title: '新增试题',
			showForm: false,
			loadPath: 'ques',
			columns: [
				{
					title: '试题标题',
					dataIndex: 'title',
					ellipsis: true
				},
				{
					title: '开放',
					dataIndex: 'status',
					width: 80
				},
				{
					title: '类型',
					dataIndex: 'type',
					width: 60,
					customRender: ({text}) => ['---','单选','多选','判断','简答','综合'][text] ?? '---'
				},
				{
					title: '试题解析',
					dataIndex: 'analysis',
					ellipsis: true
				},
				{
					width: 140,
					title: '操作',
					align: 'center',
					dataIndex: 'operation',
				},
			],
			searchData: {
				title: '',
				bank_id: 0
			},
			bank_name: ''
		}
	},
	mounted () {
		Object.assign(this.searchData, this.$route.query)
		this.fetch({...this.searchData, page: this.pagination.current})		
	},
	methods: {
		loadData(data: {items: object[], total: number, bank_name: string}){
			this.items = data.items
			this.pagination.total = data.items
			this.bank_name = data.bank_name
		},
		add(){
			this.$refs.form.formData.bank_id = this.searchData.bank_id
			this.$refs.form.add()
		}
	}
}
</script>